/**
 * 🏌️‍♂️ 创建一个类。
 * 🏄‍♀️ 在该类上创建一个缓存列表（调度中心）
 * 🤾‍♀️ $on: 把函数 fn 都加到缓存列表中，也就是订阅者注册事件到调度中心。
 * 🤸‍♀️ $emit:取到 event 事件类型，根据 event 值去执行对应缓存列表中的函数，也就是发布者发布事件到调度中心，调度中心处理代码。
 * 🏃‍♀️ $off: 根据 event 事件类型取消订阅。
 * 属性：消息队列
 * 
*/

class Observer{
    constructor() {
        this.message = {}  // 消息队列，键为要委托的内容，值为要进行的操作
    }  
    // 添加订阅者   
    $on(type, fn) {
        // 判断有没有该属性
        // 如没有则初始化一个空数组
        if(!this.message[type]){
            this.message[type] = []
        }
        //若有就向该数组push一个fn
        this.message[type].push(fn)
    };
    // 取消订阅
    $off(type, fn) {
        // 先判断有无订阅
        if(!this.message[type]){
            return
        }
        // 若无消息，删除整个消息队列
        if(!fn){
            this.message[type] = undefined
            return
        }
        // 若有消息，只删除fn这个消息
        this.message[type] = this.message[type].filter(item => item !== fn)

    };
    // 发布者
    $emit() {
        // 有无订阅
        if(this.message[type]){
            return
        }
        // 循环执行消息（发布）
        this.message[type].forEach(item => {
            item()
        })
    } 
}

let person = new Observer();

//向person委托一些内容，帮我观察（订阅）
person.$on('可达鸭', handlerA)
person.$on('小火龙', handlerB)

//消息队列不在托管
person.$off('可达鸭')
//消息队列依然托管，删除handlerA的消息
perosn.$off('可达鸭', handlerA)

// 发射事件
person.$emit('可达鸭')

//消息A
const handlerA = () => {
    console.log('hanlderA')
}
//消息B
const handlerB = () => {
    console.log('handlerB')
}
//消息C
const handlerC = () => {
    console.log('hanlderC')
}




// class Observer{
//     constructor() {
//         this.message = {}
//     }

//     subscribe(type, fn) {
//         this.message[type] = this.message[type] ? this.message[type].push[fn] : [fn]
//     }

//     unsubscribe(type, fn) {
//         let fns = this.message[type]
//         fns && (this.message[type] = this.message[type].filter(item => item !== fn ))
//     }

//     publish(type, ...args) {
//         this.message[type].forEach(fn => fn(args))
//     }
// }